<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="数据授权" required>
            <div class="item-wrap">
              <a-tooltip
                    placement="top"
                    title="可多选区域"
                    style="margin-right:10px;"
                  >
                <a-icon type="question-circle" />
              </a-tooltip>
              <a-button class="btn-space btn-select" @click="onHandleLicense($event,1)">基站位置</a-button>
              <a-button class="btn-space btn-select" @click="onHandleLicense($event,2)">IP位置</a-button>
              <a-button class="btn-space btn-select" @click="onHandleLicense($event,3)">IP定位数据</a-button>
            </div>
          </a-form-item>

          <a-form-item label="区域选择" required>
            <div class="item-wrap" style="margin-top: 0px;">
                <a-tooltip
                    placement="top"
                    title="可多选区域"
                    style="margin-right:10px;"
                  >
                    <a-icon type="question-circle" />
                  </a-tooltip>
              <multiple-cascader
                  v-decorator="[
                    'region',
                    {
                      initialValue:initialValue,
                      rules: [{ required: false, message: '请选择区域' }]
                    }
                  ]"
                  allowClear
                  style="width:450px;"
                  :maxTagCount="3"
                  :maxTagTextLength="4"
                  placeholder="请选择"
                  :selectOptionsConfig="{
                    key: 'value',
                    value: 'value',
                    text: 'label',
                    children: 'children'
                  }"
                  allText="全选"
                  noDataText="暂无数据"
                  dropdownClassName="customer-multiple-cascader"
                  :treeData="multipleTreeData"
                  @search="handleSearch"
                  @handleCheckboxChange="handleCheckboxChange"
                  @change="handleAllCheckboxChange"
                />
            </div>
          </a-form-item>
        </a-form>
    </a-spin>
   </j-modal>
</template>

<script>
import MultipleCascader from '@/components/MultipleCascader/MultipleCascader'
import JFormContainer from '@/components/jeecg/JFormContainer'
  export default {
    name: "TenantDataConfigModal",
    components: {
      JFormContainer,MultipleCascader
    },
    data () {
      return {
        form: this.$form.createForm(this, { name: 'form' }),
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
        confirmLoading:false,
        model: {},
        licenseArr:[1,2,3],
        id:'',
        validatorRules: {
          dataLicense:[ { required: true, message: '请选择数据授权!' }],
          region:[ { required: true, message: '请选择区域!' }],
        },
        multipleTreeData: [],
        initialValue: [],
      }
    },
    async created(){
      this.getArea(this.$Jpcaa)
    },
    methods: {
      edit (record) {
        this.visible=true
        this.id = record?record.id:'';
        // this.$nextTick(() =>{
        //   this.form.setFieldsValue({
        //     region: ['230000'],
        //   });
        // })
        this.initialValue=['230000']
       },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const {
          form: { validateFields },
        } = this
        validateFields((errors, values) => {
          if (!errors) {
            console.log("value",values)
            console.log("this.licenseArr",this.licenseArr);
            if(this.licenseArr.length==0 || values.region==undefined || values.region.length==0){
              this.$message.error('租户还未配置数据，无法保存');
            }
          }
        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      onHandleLicense(e,val){
        if (e.target.className.indexOf('btn-select') === -1) {
          e.target.className = 'btn-space btn-select ant-btn' // 选中
          this.licenseArr.push(val)
        }else {
          e.target.className = 'btn-space btn-unselect ant-btn'// 反选
          for (var i = 0; i < this.licenseArr.length; i++) {
            if (this.licenseArr[i] === val) {
              this.licenseArr.splice(i, 1)
                break
              }
            }
        }
        console.log(this.licenseArr)
        
      },
      
      handleCheckboxChange(selectedData) {
        console.log(selectedData);
      },
      handleSearch(value) {
        console.log(value);
      },
      handleAllCheckboxChange(value){
        console.log('allValue',value);
      },
      getArea(pcaa) {
        let arr = []
        const province = pcaa['86']
        Object.keys(province).map(key=>{
          let children = []
          const city = pcaa[key];
          Object.keys(city).map(key2=>{
            let children1 = []
            const qu = pcaa[key2];
            if(qu){
              Object.keys(qu).map(key3=>{
                if(key2=='710400'){
                  let k3 = '7104'+key3.substr(4,5)
                  children1.push({value:k3, label:qu[key3], pid:key2, index:3});
                }else{
                  children1.push({value:key3, label:qu[key3], pid:key2, index:3});
                }
                
              })
            }
            children.push({value:key2, label:city[key2], pid:key, index:2,children:children1});
          })
          arr.push({value:key, label:province[key], pid:'86', index:1,children:children});
        })
        this.multipleTreeData = [arr];
      }
    }
  }
</script>
<style lang="less" scoped>
  .item-wrap{
    display: flex;
    align-items: center;
    // justify-content: center;
    margin-top: 5px;
    /deep/.ant-btn:hover, .ant-btn:focus {
        // color: #fff;
        // background-color: #fff;
        // border-color: #fff;
        margin-top:0
    }
  }
  .btn-select{
    border-radius: 0px;
    color: #40a9ff;
    background-color: #fff;
    border-color: #40a9ff;
  }
  .btn-unselect{
    border-radius: 0px;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-color: #d9d9d9;
  }
  .btn-space{
    margin-right: 10px;
  }
</style>